<template>
<div class="index">
  <div class="searchBar" v-show="searchBarFixed">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item :index="item.index"  v-for="(item,index) in typeList">{{item.typename}}</el-menu-item>
    </el-menu>
  </div>
  <el-row :gutter="10">
    <el-col :md="3" :lg="4" :xl="3" class="leftmenu"> 
      <div class="nav_cate">
        <ul>
          <span :class="{'navClass': nav_actice == -1}" @click="handleCate(-1)">全部分类</span>
        </ul>
        <ul  v-for="(item,index) in cateList">
          <span :class="{'navClass': nav_actice == index}" @click="handleCate(index)">{{item.category_name}}</span>
          <li  v-for="(child,key) in item.children" :class="{'childnav_actice': childnav_actice == key}" @click="handleChildCate(index,key)">{{child.category_name}}</li>
        </ul>
      </div>
    </el-col>
    <el-col :md="14" :lg="14" :xl="15" class="index-home"> 
      <div>
        <!-- <myCarousel></myCarousel> -->
        <div id="home">
            <div class="nav-title" id="searchBar">
              <div class="nav-right">
                <div>
                  <span :class="{'typeClass':active === index}"  v-for="(item,index) in typeList">
                    <a :class="{'typeClass':active === index}" @click="getStatus(index)">{{item.typename}}</a>
                  </span>
                </div>
              </div>
            </div>
            <div id="list" v-infinite-scroll="load">
              <article class="excerpt excerpt-1" style="" v-for="(item,index) in articleList">
                <!-- <a class="focus" href="#" title="" target="_blank" >
                  <img class="thumb" :src="$imgUrl + item.image_url" alt=""  style="display: inline;">
                </a> -->
                <header>
               <!--  <a class="cat" href="#" title="" >{{item.keywords}}<i></i></a> -->
                <h2 @click="goDetail(index)">
                  <a>
                    {{item.title}}
                  </a>
                </h2>
                </header>
                <span class="meta">
                  <time class="time">
                    <img src="../../assets/images/time.png">
                  {{item.create_time }}
                  </time>
                  <a class="comment" target="_blank" >
                    <img src="../../assets/images/browse.png">
                    阅读(<span>{{item.click}}</span>)
                  </a>
                </span>
                <p class="note"  v-text="item.desc"></p>
                <div class="user-popover-box">
                  <span class="navbar_avatar el-dropdown-link">
                    <img v-if="item.customer_avatar" :src="$imgUrl + item.customer_avatar" class="avatar">
                    <span class="avatar" v-else >{{item.customer_name || '未知用户' | formatString}}</span>
                    <span class="name">{{item.customer_name}}</span>
                  </span>

                </div>
              </article>
            </div>
            <div class="look_more" v-loading="loading"  element-loading-text="拼命加载中" >
              <p v-if="loading && noMore"></p>
    <!--           <p v-else>—— 没有更多了 ——</p> -->
            </div>
        </div>
      </div>
      </el-col>
      <el-col  :md="6" :lg="6" :xl="5">
         <rightMenu></rightMenu>
      </el-col>
  </el-row>
</div>
</template>

<script>
import myCarousel from '@/components/carousel/carousel'
import rightMenu from '@/components/right/rightMenu'
  export default {
    data () {
      return {
        nav_actice:-1,
        childnav_actice:-1,
        activeIndex: '0',
        category_id:'',
        noMore:true,
        parent_id:0,
        scrollTop:0,
        page:1,
        size:10,
        Maxsize:0,
        loading: true,
        active:0,
        status:"",
        searchBarFixed:'',
        typeList:[
          {index:'0',typename:"全部"},
          {index:'1',typename:"推荐"},
          {index:'2',typename:"热门"}
        ],
        cateList:[],
        articleList: [
        ],
      }
    },
    mounted () {
      this.getDatas()
      this.getCate()
      window.addEventListener('scroll', this.handleScroll)
    },
    destroyed () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
      handleCate(index){
        this.nav_actice = index
        this.childnav_actice = -1
        if(index == -1){
          this.category_id = ''
        }else{
          this.category_id = this.cateList[index].category_id
        }
        this.page = 1
        this.getDatas()
      },
      handleChildCate(index,key){
        this.nav_actice = index
        this.childnav_actice = key
        this.category_id = this.cateList[index].children[key].category_id
        this.page = 1
        this.getDatas()
      },
      handleClick(index){
       
      },
      handleSelect(key, keyPath){
        this.getStatus(Number(key))
      },
      handleScroll () {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop > this.scrollTop){
           this.scrollTop = scrollTop
           let offsetTop = document.querySelector('#searchBar').offsetTop + 55
           scrollTop > offsetTop ? this.searchBarFixed = true : this.searchBarFixed = false
        }else{
           this.searchBarFixed = false
           this.scrollTop = scrollTop
        }
      },
      getDatas() {
        let params = {
          page: this.page,
          per_page: this.size,
          category_id:this.category_id,
          status: this.status,
        };
        this.$api.getArticle(params)
         .then(res => {
           console.log(res)
            this.articleList = res.data.data
            if(this.size < res.data.total){
              this.noMore = true
            }else{
              this.noMore = false
            }
            this.loading = false
         })
      },
      load () {
        if(this.noMore){
          this.loading = true
          let arr = this.articleList
          let params = {
            page: this.page,
            category_id:this.category_id,
            per_page: this.size,
            status: this.status,
          };
          this.$api.getArticle(params)
           .then(res => {
              let MaxPage = Math.ceil(res.data.total / this.size)
              if(this.page <= MaxPage){
                this.page = this.page + 1
                this.articleList = arr.concat(res.data.data)
              }else{
                setTimeout(() => {
                  this.noMore = false
                  this.loading = false
                }, 1000)
              }
           })
        }else{
           return
        }
      },
      getCate() {
        let params = {
       
        };
        this.$api.getCate(params)
         .then(res => { 
            this.cateList = res.data
         })
      },
      getStatus(index){
        this.active = index
        switch (index) {
          case 0:
            this.status = ''
            this.page = 1
            break;
          case 1:
            this.status = 1
            this.page = 1
            break;
          case 2:
            this.status = 2
            this.page = 1
        }
        this.getDatas()
      },
      // 查看文章详情
      goDetail(index) {
        let articleId = this.articleList[index].article_id;
        this.$router.push({
          path: '/articledetails/' + articleId,
        });
      },
    },
    components: {
      myCarousel,
      rightMenu
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>

@import './index.less';

</style>
